<template>
  <el-container class="login-container">
    <el-main>
      <el-card class="login-card">
        <h2 class="login-title">管理员登录</h2>
        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-position="top">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="图形验证码" prop="captcha">
            <el-input v-model="loginForm.captcha" placeholder="请输入图形验证码">
              <template #append>
                <img :src="captchaImage" @click="refreshCaptcha" class="captcha-image" alt="验证码" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button text @click="showResetPasswordDialog">忘记密码？</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>

    <!-- 重置密码对话框 -->
    <el-dialog v-model="resetPasswordDialogVisible" title="重置密码" width="30%">
      <el-form :model="resetPasswordForm" :rules="resetPasswordRules" ref="resetPasswordFormRef">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="resetPasswordForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="resetPasswordForm.code" placeholder="请输入验证码">
            <template #append>
              <el-button
                  @click="sendVerificationCode"
                  :disabled="isSendingCode"
                  :loading="isSendingCode"
              >
                {{ isSendingCode ? `${countdown}秒后重试` : '获取验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
              v-model="resetPasswordForm.newPassword"
              type="password"
              placeholder="请输入新密码"
              show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetPassword">确定</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElForm } from 'element-plus';

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
});

// 登录表单验证规则
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
});

// 重置密码表单数据
const resetPasswordForm = reactive({
  phone: '',
  code: '',
  newPassword: '',
});

// 重置密码表单验证规则
const resetPasswordRules = reactive({
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
});


// 更新验证码图片的引用
const captchaImage = ref('');
// 重置密码对话框显示状态
const resetPasswordDialogVisible = ref(false);

// 发送验证码按钮状态
const isSendingCode = ref(false);
const countdown = ref(0);

// 登录按钮加载状态
const loading = ref(false);

// 刷新图形验证码
const refreshCaptcha = async () => {
  try {
    // 直接请求原始地址
    const response = await fetch(
        // 'https://www.mxnzp.com/api/verifycode/code?' +
        // new URLSearchParams({
        //   len: 5,
        //   type: 0,
        //   app_id: '',    // 你的真实 app_id
        //   app_secret: '', // 你的真实 app_secret
        //   t: Date.now() // 防止缓存
        // })
    );

    const data = await response.json();
    if (data.code === 1) {
      // 直接使用原始图片地址
      captchaImage.value = data.data.verifyCodeImgUrl;
    } else {
      ElMessage.error('验证码获取失败: ' + data.msg);
    }
  } catch (error) {
    ElMessage.error('请求失败: ' + error.message);
  }
};

refreshCaptcha();
// 处理登录
const handleLogin = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    ElMessage.success('登录成功');
  }, 1000);
};

// 重置表单
const resetForm = () => {
  loginForm.username = '';
  loginForm.password = '';
  loginForm.captcha = '';
};

// 显示重置密码对话框
const showResetPasswordDialog = () => {
  resetPasswordDialogVisible.value = true;
};

// 发送手机验证码
const sendVerificationCode = () => {
  isSendingCode.value = true;
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value === 0) {
      clearInterval(timer);
      isSendingCode.value = false;
    }
  }, 1000);
  ElMessage.success('验证码已发送');
};

// 处理重置密码
const handleResetPassword = () => {
  resetPasswordDialogVisible.value = false;
  ElMessage.success('密码重置成功');
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
  padding: 20px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.captcha-image {
  cursor: pointer;
  height: 40px;
}
</style>